<template>
  <div class="header skin3">
    <div class="logo" @click="onGoHomeFn">
      <img src="../assets/images/logo_icon.png" alt="" class="img" />
      <div class="other">
        <div class="title-CN">
          <slot name="nameCN"></slot>
        </div>
        <div class="title_EN">
          <slot name="nameEN"></slot>
        </div>
      </div>
    </div>
    <div class="center">
      <slot name="centerContent"></slot>
    </div>
    <div class="search-wrapper">
      <div
        class="regBtn"
        v-if="$route.name === 'management'"
        @click="onGoRegFn"
      >
        模型注册
      </div>
      <slot name="search"></slot>
    </div>
    <div class="content">
      <div class="user">
        <div class="avatar"></div>
        <div class="name">Admin</div>
        <div class="icon"></div>
      </div>
      <div class="time">{{ datetime | dateFormat }}</div>
      <div class="signOut">退出</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timer: '',
      datetime: new Date(),
    }
  },
  mounted() {
    this.nowTimeFn()
  },
  methods: {
    onGoHomeFn() {
      this.$router.push({ name: 'management' })
    },
    onGoRegFn() {
      this.$router.push({ name: 'modelRegister' })
    },
    nowTimeFn() {
      this.timer = setInterval(() => {
        this.datetime = new Date()
      }, 1000)
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  },
}
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  height: 60px;
  background-color: #313131;
  display: flex;
  box-shadow: 0px 3px 10px #0b0b0d;
  justify-content: space-between;
  box-sizing: border-box;
  align-items: center;
  padding: 0 25px;
  position: relative;
  z-index: 3;
  .logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    .img {
      width: 114px;
      height: auto;
      margin-right: 10px;
    }
    .other {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      color: #fff;
      .title-CN {
        font-size: 20px;
        line-height: 26px;
        font-weight: 600;
      }
      .title_EN {
        font-size: 10px;
        line-height: 14px;
        opacity: 0.3;
      }
    }
  }
  .content {
    display: flex;
    align-items: center;
    .user {
      display: flex;
      align-items: center;
      margin-right: 25px;
      .avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        overflow: hidden;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
      }
      .name {
        font-size: 16px;
        color: #fff;
        margin: 0 4px 0 10px;
      }
      .icon {
        width: 9px;
        height: 6px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
    .time {
      font-size: 16px;
      min-width: 150px;
      color: #fff;
    }
    .signOut {
      font-size: 16px;
      margin-left: 20px;
      color: #fff;
    }
  }
  .search-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .regBtn {
      width: 135px;
      height: 40px;
      border: 2px solid #2cfcfe;
      box-sizing: border-box;
      border-radius: 2px;
      color: #2cfcfe;
      font-size: 18px;
      line-height: 36px;
      text-align: center;
      cursor: pointer;
    }
    .search-wrap {
      width: 420px;
      height: 40px;
      margin-left: 25px;
      background-color: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 20px;
      justify-content: space-between;
      border-radius: 4px;
      .serach {
        width: 340px;
        height: 100%;
        color: #ccc;
      }
      .icon {
        width: 21px;
        height: 21px;
        background: url('../assets/images/topheader-search.png') center center
          no-repeat;
        background-size: cover;
      }
    }
  }
  // 皮肤3
  &.skin3 {
    background: url('../assets/images/skin3-topbg.png') center center no-repeat;
    background-size: 100% 100%;
    .logo {
      .other {
        color: #fff;
      }
    }
    .content {
      .user {
        .avatar {
          background-image: url('../assets/images/skin3-avatar.png');
        }
        .name {
          color: #fff;
        }
        .icon {
          background-image: url('../assets/images/skin3-tri.png');
        }
      }
      .time {
        color: #fff;
      }
      .signOut {
        color: #2cfcfe;
        font-weight: 700;
      }
    }
  }
}
</style>
